<template>
  <div class="home">
    <header class="tc ">
      <h1 class="title pr pr20 pl20 f35 cfff fn">
        <router-link class="img pa cfff" to="/confirmOrder">
          <i class="el-icon-arrow-left  f40 "></i>
        </router-link>
        订单支付
      </h1>
    </header>
    <main class="p20">
      <section class="bcfff f20 mb20">
        <ul class=" tc">
          <li class="mb30">
            <img :src="obj.avatarUrl" class="car ">
          </li>
          <li class="f30 mb40">
            支付成功
          </li>
          <li class="f50  mb60">
            <p>{{ obj.price }}</p>
          </li>
          <li class="f25 mb70">
            预约编号:{{ obj.reserveNum }}
          </li>
          <li class="mb30 f25">
            <router-link to="/home" class="cfff btn bc0d65 dbc">返回首页</router-link>
          </li>
          <li class="f25">
            <router-link to="/upOrderInfo" class="cfff btn bcbfbf dbc">订单详情</router-link>
          </li>
        </ul>
      </section>
    </main>
    <ul class="footer  bcff bs  tc pf w100 jcsb f20">
      <li>
        <a href="#" class="pay-order f25 cfff ">
          <img class="add" src="../../../assets/img/wash-car-img/add.png"> 添加车辆
        </a>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      obj: {
        avatarUrl: require('../../../assets/img/wash-car-img/right-round.png'),
        price: 39.90,
        reserveNum: "324252536363634"
      },
    }
  }
}
</script>
<style scoped>
.bcbfbf {
  background-color: #bfbfbf;
}

.bc0d65 {
  background-color: #0d65e8;
}

.mb70 {
  margin-bottom: 70rem;
}

.mb60 {
  margin-bottom: 60rem;
}

.mb35 {
  margin-bottom: 35rem;
}

.asc {
  align-self: center;
}

.line {
  height: 1rem;
  background-color: #f7f7f7;
}

.line-dash {
  border: dashed 2rem;
}

.home {
  background-color: #f7f7f7;
}

/* 头部样式  ---需要可剪切 */
header .title {
  height: 145rem;
  line-height: 145rem;
}

header {
  height: 435rem;
  background-color: #3385fd;
}

header .img {
  width: auto;
  left: 20rem;
  top: 0;
}

main {
  margin-top: -310rem;
}

/* 手机端必须加上这一句--体验感 */
main {
  margin-bottom: 120rem;
}

main section {
  padding: 100rem 30rem;
  border-radius: 20rem;
  box-sizing: border-box;
}

main section ul li img.car {
  width: 130rem;
  height: 130rem;
  border-radius: 50%;
}

main section ul li a.btn {
  padding: 20rem 0;
  display: block;
  width: 520rem;
  border-radius: 40rem;
}</style>